<template>
    <div>
        <section v-if="data != {}">
            <div style="width: 1000px;margin: 0 auto;">
                <div style="display: flex;flex-direction: column;align-items: start;margin-top: 20px;">
                    <span style="font-weight: bold;font-size: 18px;color: #006400;line-height: 18px;">
                        资料专区
                    </span>
                    <el-divider style="margin: 15px 0;" />
                    <!-- <el-row :gutter="0">
                        <el-col :span="24" v-for="(v, k) in data" :key="k" v-show="k != 1">
                            <section
                                style="display: flex; width: 98%; height: 100px; margin-bottom: 20px; padding: 10px;overflow: hidden;
                                        border-radius: 3px; border: 1px solid rgb(245, 246, 247); box-sizing: border-box;display: flex;justify-content: flex-start;position: relative;">
                                <section>
                                    <el-image style="width: 68px;" src="https://www.zhongke3.com/staticone/img/pdf.png"
                                        it="cover" />
                                </section>
                                <section style="margin:10px 15px;display: flex;flex-direction: column;">
                                    <span style="font-size: 16px;color: #333;line-height: 22px;">{{ v.name }}</span>
                                    <span style="font-size: 12px;color: #333;line-height: 18px;">{{ v.fileName }}</span>
                                    <span style="font-size: 12px;color: #333;line-height: 18px;padding-top: 10px;">{{
                                        v.createdAt }}</span>
                                </section>
                                <section style="position: absolute;bottom: 10px;right: 15px;">
                                    <el-button @click="download(v)"
                                        style="height: 28px; line-height: 28px; padding: 0 28px;background-color: #006400; color:#fff"
                                        size="large" round>下载</el-button>
                                </section>
                            </section>
                        </el-col>
                    </el-row> -->
                    <el-row :gutter="0" v-for="(v, k) in data" :key="k" v-show="k != 1">
                        <section
                            style="display: flex; width: 98%; height: 100px; margin-bottom: 20px; padding: 10px;overflow: hidden;
                                        border-radius: 3px; border: 1px solid rgb(245, 246, 247); box-sizing: border-box;display: flex;justify-content: flex-start;position: relative;">
                            <section v-if="v.cover === ''">
                                <el-image style=" width: 68px;" src="https://www.zhongke3.com/staticone/img/pdf.png"
                                    it="cover" />
                            </section>
                            <section v-if="v.cover !== ''">
                                <el-image style=" width: 68px;" :src="v.cover" it="cover" />
                            </section>
                            <section style="margin:10px 15px;display: flex;flex-direction: column;">
                                <span style="font-size: 25px;color: #333;line-height: 22px;">{{ v.name }}</span>
                                <span style="font-size: 15px;color: #333;line-height: 18px;padding-top: 30px;">{{
                                    v.fileName }}</span>
                            </section>
                            <section style="position: absolute;bottom: 30px;right: 15px;">
                                <span
                                    style="font-size: 15px;color: #333;line-height: 40px;padding-top: 28px; margin-right: 30px;">{{
                                        v.createdAt }}</span>
                                <el-button @click="download(v)"
                                    style="height: 38px; line-height: 28px; padding: 0 28px;background-color: #006400; color:#fff"
                                    size="large" round>下载</el-button>
                            </section>
                        </section>
                    </el-row>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    // name: "home"
    data() {
        return {
            name: '',
            data: {},
            bannerList: [{
                imgUrl: require("@/assets/img/banner.png")
            }],
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.crud.get("/resources/list", { page: 1, limit: 1000 }).then(res => {
                this.data = res.data.data.results;
            })
        },
        download(i) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', i.filePath, true);
            xhr.responseType = 'blob';

            xhr.onload = function () {
                if (this.status === 200) {
                    const blob = this.response;
                    const link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = i.fileName;
                    link.click();
                }
            };
            xhr.send();
        },
    }
}

</script>
<style scoped>
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.el-divider--horizontal {
    margin: 20px 0;
    background-color: #006400;
}

.el-row {
    margin: 0px !important;
    width: 100%;
}

.personal-info-box {
    overflow: hidden;

    .personal-info-ul {
        list-style: none;
    }

    .personal-edit-title {
        position: relative;
        padding-left: 10px;
        color: var(--el-text-color-regular);
        line-height: 22px;

        &::after {
            content: '';
            width: 4px;
            height: 18px;
            line-height: 22px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--el-color-primary);
            border-radius: 2px;
        }
    }
}

.line1 {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 超出容器部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}
</style>
